import React, {FC, useContext, useState} from 'react';
import "./index.less";
import {useRequest} from "ahooks";
import * as API from "@/services";
import {Space, Table, Tag} from "antd";
import {correspVal} from "@/utils/biz";
import {HxConfigContext} from "@/layouts/HxConfigContext";
import {KfModal, useBackendEnum} from "kf-web-library";
import {FormattedMessage} from "umi";
import PasswordModifyForm from "@/pages/MinePage/Passport/PasswordModifyForm";
import SubscriptionDetail from "@/pages/MinePage/Subscription/SubscriptionDetail";

interface SubscriptionProps {
}

/**
 * 订阅记录 页面
 */
const Subscription: FC<SubscriptionProps> = (props) => {
  const {isZhCN} = useContext(HxConfigContext);
  const {enumDict, enumTypeDict, getBackendEnum} = useBackendEnum();

  const [selectedOpenSubscriptionId, setSelectedOpenSubscriptionId] = useState<API.EntityId | undefined>();

  const subscribesReq = useRequest((p) => API.queryMineJournalSubscribes({
    pageSize: 20,
    ...p,
  }))
  const data = subscribesReq.data?.data;
  return (
    <div className={"subscription-container"}>
      <Table
        className={"subscription-table"}
        rowKey={"id"}
        columns={[
          {
            title: <FormattedMessage id="mall.SubscriptionDate"/>,
            dataIndex: 'subscribeDate',
            width: 110,
          },
          /*{
            title: '订单编号',
            dataIndex: 'order',
            width: 180,
            render: (text, record) => {
              return record.order.orderNo;
            },
          },*/
          {
            title: <FormattedMessage id="mall.SubscriptionJournalName"/>,
            dataIndex: 'journal',
            //width: 280,
            render: (text, record) => {
              return correspVal(isZhCN, record?.journal?.journalNameCn, record?.journal?.journalNameEn);
            },
          },
          {
            title: <FormattedMessage id="mall.SubscriptionSelect"/>,
            dataIndex: 'timeType',
            width: 225,
            render: (text, record) => {
              const ret = <FormattedMessage id="journal.period-info.aggregate-by-subscribed-issue" values={{
                total: record?.periodCount || 0,
                deliveredCount: record?.periodListCount || 0,
              }}/>

              const displayType = getBackendEnum("SubscribeDisplayType", record.displayType);
              const timeType = getBackendEnum("SubscribeTimeType", record.timeType);
              return (
                <div>
                  <div>
                    <Tag>{displayType?.i18EnumDesc}</Tag>
                    <Tag>{timeType?.i18EnumDesc}</Tag>
                  </div>
                  <div>
                    {ret}
                  </div>
                </div>
              );
            },
          },
          {
            title: <FormattedMessage id="text.status"/>,
            dataIndex: 'status',
            width: 70,
            render: (text, record) => {
              const status = getBackendEnum("SubscribeStatus", record.status);
              return (
                <span style={{color: status?.enumColor}}>
                   {status?.i18EnumDesc}
                </span>
              )
            },
          },
          {
            title: <FormattedMessage id="text.action"/>,
            key: 'action',
            width: 70,
            render: (_, record) => (
              <Space size="middle">
                <a onClick={() => {
                  setSelectedOpenSubscriptionId(record.id)
                }}>
                  <FormattedMessage id="text.detail"/>
                </a>
              </Space>
            ),
          },
        ]}
        dataSource={data}
        pagination={{
          size: "small",
          hideOnSinglePage: true,
          total: subscribesReq?.data?.total,
          current: subscribesReq?.data?.current,
          pageSize: subscribesReq?.data?.pageSize,
          onChange: (pageNum, pageSize) => {
            subscribesReq.run({
              page: pageNum,
              pageSize
            })
          }
        }}
        size={"small"}
      />


      {
        !!selectedOpenSubscriptionId && (
          <KfModal
            className={"passport-modal"}
            title={null}
            open={true}
            destroyOnClose={true}
            onCancel={() => setSelectedOpenSubscriptionId(undefined)}
            onSubmitted={() => {

            }}
            width={850}
          >
            <SubscriptionDetail subscriptionId={selectedOpenSubscriptionId}/>
          </KfModal>
        )
      }
    </div>
  );
};

export default Subscription;
